<template>
  <a-modal
    :title="$t('technology.serial.sectionDef')"
    :visible="visible"
    :width="700"
    :maskClosable="false"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item :label="$t('technology.serial.rule') + $t('common.name')" v-bind="formItemLayout">
        {{ rule.ruleName }}
      </a-form-item>
      <a-form-item
        v-for="(k, index) in keys"
        :key="k"
        required
        :label="index === 0 ? $t('technology.serial.parameterValue') : ''"
        v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
      >
        <s-input
          :limit="paramList[k].startLength"
          v-decorator="[
            `varValue[${k}]`,
            {
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: $t('common.emptyErr', { name: $t('technology.serial.parameterValue') })
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button :loading="loading" @click="handlePreview" type="primary">{{
          $t('technology.serial.preview')
        }}</a-button>
      </a-form-item>
    </a-form>
    <a-card v-if="previewList.length">
      <div v-for="item in previewList" :key="item">{{ item }}</div>
    </a-card>
  </a-modal>
</template>

<script>
import { SInput } from '@/components';
import { previewSerail } from '@/api/technology/serial/serial';

export default {
  name: 'RulePreviewModal',
  components: {
    SInput
  },
  data() {
    return {
      loading: false,
      visible: false,
      rule: {},
      previewList: [],
      sectionList: [],
      keys: [],
      formItemLayout: {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 4
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 20
          }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 20,
            offset: 4
          }
        }
      }
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    open(rule, sectionList) {
      this.visible = true;
      this.rule = rule;
      this.sectionList = sectionList;
      this.fieldDecorator();
    },
    fieldDecorator() {
      this.keys = [];
      for (let i = 0; i < this.paramList.length; i++) {
        // keys.push(i)
        // this.form.getFieldDecorator(`varValue[${i}]`)
        this.keys.push(i);
      }
      // this.form.getFieldDecorator('keys', { initialValue: keys })
    },
    handlePreview() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        values.keys = this.keys;
        const { keys, varValue } = values;
        const arr = [];
        (keys || []).forEach(key => {
          arr.push(varValue[key]);
        });
        this.loading = true;
        previewSerail({
          serialNumId: this.rule.id,
          varValue: arr
        })
          .then(res => {
            this.loading = false;
            this.previewList = res.data;
            if (Array.isArray(this.previewList) && this.previewList.length === 0) {
              this.$notification.error({
                message: this.$t('common.error'),
                description: this.$t('technology.serial.serialNumberNotFound')
              });
            }
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleCancel() {
      this.visible = false;
      this.rule = {};
      this.form.resetFields();
      this.previewList = [];
    }
  },
  computed: {
    paramList() {
      return this.sectionList.filter(d => d.sectionType === 'Param');
    }
  }
};
</script>

<style scoped></style>
